<template>
  <div>
    <!-- 导航条 -->
    <van-nav-bar title="切换城市" fixed placeholder left-arrow @click-left="onClickLeft" />
    <!-- 搜索框 -->
    <van-search v-model="cityKwd" v-stickytop="46" placeholder="输入城市名或拼音" background="#f4f4f4" clear-trigger="always"
                show-action />
    <!-- 城市列表 -->
    <city-list class="city-list hidden-scrollbar" :cityKwd="cityKwd" />
  </div>
</template>

<script>
import { NavBar, Search } from 'vant'
import CityList from './CityList.vue'
import { directiveMixins } from '@/mixins'

export default {
  name: 'CitiesView',
  mixins: [directiveMixins],
  components: { [NavBar.name]: NavBar, [Search.name]: Search, CityList },
  data () {
    return {
      cityKwd: ''
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/films/nowplaying')
    }
  }
}
</script>

<style lang="scss" scoped>
/* 隐藏城市列表滚动条 */
.city-list {
  height: calc(100vh - 150px); // 覆盖默认高度
}
</style>
